vue0.11.9源码 src_instance_events.js

Last Updated:

2023-08-04

inDoc逻辑

源码在(src/util/dom.js#L19)[https://github.com/vuejs/vue/blob/0.11.9/src/util/dom.js#L19]

var doc =
  typeof document !== 'undefined' &&
  document.documentElement
  
exports.inDoc = function (node) {
  var parent = node && node.parentNode
  return doc === node ||
    doc === parent ||
    !!(parent && parent.nodeType === 1 && (doc.contains(parent)))
}

documentElement

在JavaScript中，documentElement是一个用于获取文档根元素的属性。文档根元素通常是HTML文档中的<html>元素，它是文档中所有元素的祖先元素

parentNode

在JavaScript中，parentNode是一个用于获取一个DOM节点的父节点的属性。每个DOM节点都有一个parentNode属性，指向该节点的直接父节点。

parentNode和parentElement

在JavaScript中，parentNode和parentElement都是用于获取DOM节点的父级元素的属性，但它们之间有一些区别。

parentNode是一个包含所有类型的父节点的属性，包括元素节点、文本节点和注释节点等。如果当前节点没有父节点（例如，它是文档节点），则parentNode属性将返回null。

parentElement是一个只包含元素节点的父级元素的属性。如果当前节点没有父级元素（例如，它是文档节点或注释节点），则parentElement属性将返回null。

一般来说，如果我们只关心元素节点的父级元素，那么使用parentElement属性会更方便，因为它只返回元素节点的父级元素。但是，如果我们需要处理文本节点或注释节点等其他类型的节点，那么使用parentNode属性会更合适，因为它可以返回任何类型的父节点。

nodeType

在JavaScript中，nodeType是一个用于检查DOM节点类型的属性。每个DOM节点都有一个nodeType属性，它是一个整数值，表示该节点的类型。

以下是一些常见的DOM节点类型及其对应的nodeType值：

元素节点（element）：1 属性节点（attribute）：2 文本节点（text）：3 注释节点（comment）：8 文档节点（document）：9 文档类型节点（document type）：10

这里parent.nodeType === 1来判断是否是元素节点

dom contains

在JavaScript中，contains()方法是用来检查一个元素是否是另一个元素的后代。该方法接受一个参数，即要检查是否为后代的元素。如果指定的元素是当前元素的后代，则该方法返回true；否则，返回false。

_initEvents代码定义

exports._initEvents = function () {
  var options = this.$options
  registerCallbacks(this, '$on', options.events)
  registerCallbacks(this, '$watch', options.watch)
}

顺着registerCallbacks，最后register函数实现

register函数

如果注册的时候响应函数的入参是个函数的话，就直接'存' 如果是个字符串的话，就从methods里头取出这个函数，再'存'

function register (vm, action, key, handler) {
  var type = typeof handler
  if (type === 'function') {
    vm[action](key, handler)
  } else if (type === 'string') {
    var methods = vm.$options.methods
    var method = methods && methods[handler]
    if (method) {
      vm[action](key, method)
    } else {
      _.warn(
        'Unknown method: "' + handler + '" when ' +
        'registering callback for ' + action +
        ': "' + key + '".'
      )
    }
  }
}

register函数里头核心的'存'逻辑->'$on'或者'$watch'

先只讨论'$on'逻辑

'$on'逻辑是在(src/api/events.js)[https://github.com/vuejs/vue/blob/0.11.9/src/api/events.js#L10]定义

总结起来就是this下面的this._events数组，将注册时候传入的回调函数推入这个数组里头

exports.$on = function (event, fn) {
  (this._events[event] || (this._events[event] = []))
    .push(fn)
  modifyListenerCount(this, event, 1)
  return this
}

关于我

主要做前端。但更多是一个能解决问题的工程师。

我的足迹

  1. GitHub